<template>
  <el-row>
    <el-col :span="24">
      <el-card style="width: 100%; height: 50px">
        |总存栏<el-text type="primary" size="large">{{ num }}</el-text
        >只
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card style="width: 650px; height: 550px">
        <div id="main" style="width: 650px; height: 550px"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card style="width: 650px; height: 550px">
        <div id="main1" style="width: 650px; height: 550px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import "echarts";
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import axios from "axios";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const num = ref(0);
let myChart: any;
let myChart1: any;
onMounted(() => {
  GetEchartsPigType();
  GetGetVarieties();
  myChart = echarts.init(document.getElementById("main"));
  myChart1 = echarts.init(document.getElementById("main1"));
});

//种母存栏
const EchartsPigType = ref([]);
const GetEchartsPigType = () => {
  axios
    .post(apiBedinUrl+"/api/Echarts/GetBreedingSowEcharts", {})
    .then((res) => {
      console.log(res.data);
      EchartsPigType.value = res.data.data;
      updateNum();
    });
};
const desiredColors = [
  "rgb(196, 86.4, 86.4)",
  "#F56C6C",
  "rgb(248, 152.1, 152.1)",
  "rgb(250, 181.5, 181.5)",
  "rgb(252, 210.9, 210.9)",
];
//种母存栏
watch(EchartsPigType, (val: any) => {
  console.log(val);

  // 转换数据为适合ECharts的格式
  const chartData = val.map((item) => ({
    name: item.name,
    value: item.value, // 假设每个数据项都有'value'属性
  }));

  myChart.setOption({
    title: {
      text: "|种母存栏",
      left: "left", // 可根据需要调整标题位置
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        data: chartData,
        color: desiredColors, // 应用自定义颜色
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
});

//种公存栏
const GetVarieties = ref([]);
const GetGetVarieties = () => {
  axios
    .post(apiBedinUrl+"/api/Echarts/GetVarieties", {})
    .then((res) => {
      console.log(res.data);
      GetVarieties.value = res.data.data;
      updateNum();
    });
};
//种公存栏
watch(GetVarieties, (val: any) => {
  console.log(val);
  const arrname = val.map((d) => d.name);
  console.log(arrname);

  myChart1.setOption({
    title: {
      text: "|种公存栏",
      left: "left",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertival",
      left: "left",
      top: "30px",
    },
    series: [
      {
        type: "pie",
        data: GetVarieties.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
});

// // 更新 num 的函数
// const updateNum = () => {
//   const sowCount = EchartsPigType.value.value; // 种母存栏数量
//   const varietyCount = GetVarieties.value.value; // 种公存栏数量
//   num.value = sowCount.value + varietyCount.value; // 计算总和并更新 num
// };
</script>
